<!-- 订单管理 -->
<template>
  <div class="dashboard-container order-list customer-list-box">
    <div class="app-container">
      <el-card
        class="search-card-box"
        shadow="never"
      >
        <el-form
          ref="orderSearchFormData"
          :model="orderSearchFormData"
          label-width="90px"
        >
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item label="订单编号">
                <el-input
                  v-model="orderSearchFormData.id"
                  placeholder="请输入订单编号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单状态">
                <el-select
                  v-model="orderSearchFormData.status"

                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in orderStatusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="付费状态">
                <el-select
                  v-model="orderSearchFormData.paymentStatus"
                  style="width:98%"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in paymentStatusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发件人姓名">
                <el-input
                  v-model="orderSearchFormData.senderName"
                  placeholder="请输入发件人姓名"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发件人电话">
                <el-input
                  v-model="orderSearchFormData.senderPhone"
                  placeholder="请输入发件人电话"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发件人地址">
                <el-select
                  v-model="orderSearchFormData.senderProvinceId"
                  clearable
                  placeholder="请选择省"

                  style="width:32%"
                  @change="getSenderProvince"
                >
                  <el-option
                    v-for="item in provinceList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>

                <el-select
                  v-model="orderSearchFormData.senderCityId"
                  clearable
                  placeholder="请选择市"
                  style="width:32%"

                  @change="getSenderCity"
                >
                  <el-option
                    v-for="item in cityList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>

                <el-select
                  v-model="orderSearchFormData.senderCountyId"
                  clearable
                  placeholder="请选择县/区"
                  style="width:32%"
                  @change="getArea"
                >
                  <el-option
                    v-for="item in countryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收件人姓名">
                <el-input
                  v-model="orderSearchFormData.receiverName"
                  placeholder="请输入收件人姓名"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收件人电话">
                <el-input
                  v-model="orderSearchFormData.receiverPhone"
                  placeholder="请输入收件人电话"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收件人地址">
                <el-select
                  v-model="orderSearchFormData.receiverProvinceId"
                  clearable
                  placeholder="请选择省"
                  style="width:32%"
                  @change="getProvinceReceiver"
                >
                  <el-option
                    v-for="item in provinceList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>

                <el-select
                  v-model="orderSearchFormData.receiverCityId"
                  clearable
                  placeholder="请选择市"
                  style="width:32%"
                  @change="getReceiverCity"
                >
                  <el-option
                    v-for="item in receiverCityList"
                    :key="item"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>

                <el-select
                  v-model="orderSearchFormData.receiverCountyId"
                  clearable
                  placeholder="请选择县/区"
                  style="width:32%"
                  @change="getReceiverArea"
                >
                  <el-option
                    v-for="item in countryReceiverList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col>
              <el-button
                style="width: 90px;height: 40px;"
                type="warning"
                @click="handleFilter(orderSearchFormData)"
              >搜索</el-button>
              <el-button

                style="width: 90px;height: 40px;"
                @click="resetForm(orderSearchFormData)"
              >重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <div
        v-loading="listLoading"
        :class="{ 'loading-box': listLoading }"
        element-loading-text="加载中"
        style="margin-top: 20px"
      >
        <el-card
          class="table-card-box"
          shadow="never"
        >
          <el-table
            :key="tableKey"
            ref="multipleTable"
            :data="list"
            fit
            style="width: 100%"
            stripe
            :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
          >
            <div
              v-show="(!list || list.length <= 0) && !listLoading && !searchkey"
              slot="empty"
            >
              <img
                src="@/icons/pic-kong.png"
                alt="img"
                style="margin-top: 20px;width: 14%;height: 14%;"
              />
              <p
                style="margin-top: -20px;padding-bottom: 0px;"
              >
                这里空空如也
              </p>
            </div>
            <el-card
              v-show="(!list || list.length <= 0) && !listLoading && searchkey"
              slot="empty"
              class="table-empty-box"
              shadow="never"
            >
              <empty></empty>
            </el-card>
            <el-table-column
              label="序号"
              width="60"
              type="index"
              align="left"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.$index + (orderSearchFormData.page - 1) * orderSearchFormData.pageSize + 1
                }}</span>
              </template></el-table-column>
            <el-table-column
              label="订单编号"
              width="160"
              align="left"
              prop="id"
            ></el-table-column>
            <el-table-column
              label="运单编号"
              width="130"
              align="left"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.transportOrder === null
                    ? ''
                    : scope.row.transportOrder.id
                }}</span>
              </template></el-table-column>
            <el-table-column
              label="下单时间"
              width="160"
              align="left"
              prop="createTime"
            ></el-table-column>
            <el-table-column
              label="订单状态"
              width="90"
              align="left"
              prop="status"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.status == 23000">待取件</span>
                <span v-if="scope.row.status == 23001">已取件</span>
                <span v-if="scope.row.status == 23002">网点自寄</span>
                <span v-if="scope.row.status == 23003">网点入库</span>
                <span v-if="scope.row.status == 23004">待装车</span>
                <span v-if="scope.row.status == 23005">运输中</span>
                <span v-if="scope.row.status == 23008">派送中</span>
                <span v-if="scope.row.status == 23009">已签收</span>
                <span v-if="scope.row.status == 23010">拒收</span>
              </template></el-table-column>
            <el-table-column
              label="发件人姓名"
              width="150"
              align="left"
              prop="senderName"
            ></el-table-column>
            <el-table-column
              label="发件人电话"
              width="120"
              align="left"
              prop="senderPhone"
            ></el-table-column>
            <el-table-column
              label="发件人地址"
              width="260"
              align="left"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.senderProvince === null
                    ? ''
                    : scope.row.senderProvince.name
                }}</span>
                <span>{{
                  scope.row.senderCity === null ? '' : scope.row.senderCity.name
                }}</span>
                <span>{{
                  scope.row.senderCounty === null
                    ? ''
                    : scope.row.senderCounty.name
                }}</span>
                <span>{{ scope.row.senderAddress }}</span>
              </template></el-table-column>
            <el-table-column
              label="收件人姓名"
              width="160"
              align="left"
              prop="receiverName"
            ></el-table-column>
            <el-table-column
              label="收件人电话"
              width="120"
              align="left"
              prop="receiverPhone"
            ></el-table-column>
            <el-table-column
              label="收件人地址"
              width="260"
              align="left"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.receiverProvince === null
                    ? ''
                    : scope.row.receiverProvince.name
                }}</span>
                <span>{{
                  scope.row.receiverCity === null
                    ? ''
                    : scope.row.receiverCity.name
                }}</span>
                <span>{{
                  scope.row.receiverCounty === null
                    ? ''
                    : scope.row.receiverCounty.name
                }}</span>
                <span>{{ scope.row.senderAddress }}</span>
              </template></el-table-column>
            <el-table-column
              label="取件类型"
              width="100"
              align="left"
              prop="pickupType"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.pickupType == 1">网点自寄</span>
                <span v-else>上门取件</span>
              </template></el-table-column>
            <el-table-column
              label="付费类型"
              width="100"
              align="left"
              prop="paymentMethod"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.paymentMethod == 1">预结</span>
                <span v-else>到付</span>
              </template></el-table-column>
            <el-table-column
              label="付费状态"
              width="100"
              align="left"
              prop="paymentStatus"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.paymentStatus == 1">未付</span>
                <span v-else>已付</span>
              </template>
            </el-table-column>
            <el-table-column
              label="支付金额"
              width="100"
              align="left"
              prop="amount"
            ></el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="80"
              align="center"
            >
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="
                    look(
                      scope.row.id,
                      scope.row.status,
                      scope.row.pickupType,
                      scope.row.transportOrder === null
                        ? ''
                        : scope.row.transportOrder.id
                    )
                  "
                >查看详情</el-link>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div
            class="pagination"
            style="text-align:center"
          >
            <div class="pages">
              <el-pagination
                :page-sizes="[10, 20, 30, 50]"
                :current-page="orderSearchFormData.page"
                :total="Number(total)"
                :page-size="Number(orderSearchFormData.pageSize)"
                layout="total,sizes,prev,pager,next,jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import { orderList } from '@/api/order'
import options from '@/api/orderstatus.json'
import { areaList } from '@/api/common'
export default {
  data() {
    return {
      total: '',
      orderId: '',
      list: [],
      orderStatusOptions: '', // 订单状态
      paymentStatusOptions: [{ id: 1, name: '未付' }, { id: 2, name: '已付' }],
      provinceList: [], // 省
      cityList: [], // 市
      countryList: [], // 县
      receiverCityList: [], // 省
      countryReceiverList: [], // 市
      orderSearchFormData: {
        page: 1,
        pageSize: 10,
        id: '',
        status: '', // 订单状态
        paymentStatus: '', // 付费状态
        // 发件人
        senderName: '',
        senderPhone: '',
        senderProvinceId: '', // 省份
        senderCityId: '', // 市
        senderCountyId: '', // 县
        // 收件人
        receiverName: '',
        receiverPhone: '',
        receiverAddress: '',
        receiverProvinceId: '', // 省份
        receiverCityId: '', // 市
        receiverCountyId: '' // 县
      },
      searchkey: true,
      listLoading: true,
      checked: true,
      tableKey: 0,
      requestParamsProvince: {}
    }
  },
  // 1
  created() {
    this.getList()
    this.orderStatusOptions = options
    this.orderSearchFormData.status = this.$route.query.status
      ? Number(this.$route.query.status)
      : '' // 三元表达式判断是否有值
    const _this = this
    this.initialDate() // 初始化日期数据
    this.showCity() // 初始化省市区数据

    // 点击enter进入搜索
    document.onkeydown = function(e) {
      var key = window.event.keyCode
      if (key === 13) {
        _this.handleFilter(this.orderSearchFormData)
      }
    }
  },
  methods: {
    // 获取分页数据
    async getList() {
      this.listLoading = true
      const { data: res } = await orderList(this.orderSearchFormData)
      this.listLoading = false
      // 把数据给页面
      this.list = res.items
      console.log(res.items)

      // 获取总条数
      this.total = res.counts
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.orderSearchFormData.page = val
      this.getList()
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.orderSearchFormData.pageSize = val
      if (this.orderSearchFormData.page === 1) {
        this.getList(this.orderSearchFormData)
      }
    },
    // 初始数据
    initialDate() {
      this.getList()
    },
    // 获取省
    async showCity() {
      this.requestParamsProvince.parentId = 0
      const { data: res } = await areaList(this.requestParamsProvince)
      this.provinceList = res
    },
    // 获取发件人id
    async getSenderProvince(vId) {
      if (this.orderSearchFormData.senderProvinceId !== 0) {
        this.requestParamsProvince.parentId = this.orderSearchFormData.senderProvinceId
        const { data: res } = await areaList(this.requestParamsProvince)
        this.cityList = res
      }
      // 重置市区
      this.orderSearchFormData.senderCityId = ''
      // 新添加的
      this.orderSearchFormData.senderCountyId = ''
      if (vId !== '') {
        let obj = {}
        obj = this.provinceList.find(item => {
          return item.id === vId
        })
        this.orderSearchFormData.senderProvinceId = obj.id
      }
    },
    async getCity() {
      if (this.orderSearchFormData.senderProvinceId !== 0) {
        this.requestParamsProvince.parentId = this.orderSearchFormData.senderCityId
        const { data: res } = await areaList(this.requestParamsProvince)
        this.countryList = res
        this.orderSearchFormData.senderCountyId = ''
      }
    },
    // 获取市区id
    getSenderCity(vId) {
      // TODO
      this.orderSearchFormData.senderCountyId = ''
      if (vId !== '') {
        let obj = {}
        obj = this.cityList.find(item => {
          return item.id === vId
        })

        this.getCity()
        this.orderSearchFormData.senderCityId = obj.id
      }
    },
    // 新增县地址
    getArea() {
      if (this.orderSearchFormData.senderCountyId !== '') {
        let obj = {}
        obj = this.countryList.find(item => {
          return item.id === this.orderSearchFormData.senderCountyId
        })
        this.orderSearchFormData.senderCountyId = obj.id
      }
    },
    // 获取收件人地址
    async getProvinceReceiver(vId) {
      if (this.orderSearchFormData.receiverProvinceId !== 0) {
        this.requestParamsProvince.parentId = this.orderSearchFormData.receiverProvinceId
        const { data: res } = await areaList(this.requestParamsProvince)
        this.receiverCityList = res
      }
      // 重置市区
      this.orderSearchFormData.receiverCityId = ''
      // 新添加的
      this.orderSearchFormData.receiverCountyId = ''
      if (vId !== '') {
        let obj = {}
        obj = this.provinceList.find(item => {
          return item.id === vId
        })
        this.orderSearchFormData.receiverProvinceId = obj.id
      }
    },
    async receiverCity() {
      if (this.orderSearchFormData.receiverProvinceId !== 0) {
        this.requestParamsProvince.parentId = this.orderSearchFormData.receiverCityId
        const { data: res } = await areaList(this.requestParamsProvince)
        this.countryReceiverList = res
        this.orderSearchFormData.receiverCountyId = ''
      }
    },
    // 获取市区id
    getReceiverCity(vId) {
      // TODO
      this.orderSearchFormData.receiverCountyId = ''
      if (vId !== '') {
        let obj = {}
        obj = this.receiverCityList.find(item => {
          return item.id === this.orderSearchFormData.receiverCityId
        })
        this.receiverCity()
        this.orderSearchFormData.receiverCityId = obj.id
      }
    },
    // 新增县地址
    getReceiverArea() {
      if (this.orderSearchFormData.receiverCountyId !== '') {
        let obj = {}
        obj = this.countryReceiverList.find(item => {
          return item.id === this.orderSearchFormData.receiverCountyId
        })
        this.orderSearchFormData.receiverCountyId = obj.id
      }
    },
    // 搜索信息
    async handleFilter(opt) {
      this.orderSearchFormData = {
        ...this.orderSearchFormData,
        status:
          this.orderSearchFormData.status === 0
            ? ''
            : this.orderSearchFormData.status
      }
      try {
        this.orderSearchFormData.page = 1
        await this.getList(this.orderSearchFormData)
      } catch (error) {
        this.list = []
        this.$message.warning('请正确输入订单编号')
      }
    },
    // 重置表单
    resetForm(orderSearchFormData) {
      // this.$refs[orderSearchFormData].resetFields()
      // 之所以注释掉是因为这里必须配合prop对表单进行赋值，但后端有的字段不支持空串
      this.cityList = {}
      this.countryList = {}
      this.countryReceiverList = {}
      this.receiverCityList = {}
      this.orderSearchFormData.page = 1
      this.orderSearchFormData.pageSize = 10
      this.orderSearchFormData.status = ''
      this.orderSearchFormData.id = ''
      this.orderSearchFormData.paymentStatus = ''
      this.orderSearchFormData.senderName = ''
      this.orderSearchFormData.senderPhone = ''
      this.orderSearchFormData.receiverName = ''
      this.orderSearchFormData.receiverPhone = ''

      this.orderSearchFormData.senderProvinceId = ''
      this.orderSearchFormData.senderCityId = ''
      this.orderSearchFormData.senderCountyId = ''

      this.orderSearchFormData.receiverCountyId = ''
      this.orderSearchFormData.receiverCityId = ''
      this.orderSearchFormData.receiverProvinceId = ''

      this.searchkey = false
      this.getList()
    },
    // 查看详情跳转
    look(id, status, pickupType, transportOrderId) {
      this.$router.push({
        path: '/business/edit-order',
        query: {
          orderId: id,
          status: status,
          pickupType: pickupType,
          transportOrderId
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}

// 下拉框
/deep/ .el-select {
  width: 100%;

}
</style>

<style lang="scss" scoped>
.order-list /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
</style>
